<template>
  <div class="dashboard-container">
    <div class="page-header">
      <h1>首页</h1>
    </div>
    
    <div class="data-overview">
      <h2>数据总览</h2>
      <div class="overview-cards">
        <div class="overview-card">
          <div class="card-icon" style="background-color: #3b82f6">
            <el-icon><Plus /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-number">500</div>
            <div class="card-label">今日预约人数</div>
          </div>
          <div class="card-trend">
            <el-icon><ArrowUp /></el-icon>
            <span>+12%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon" style="background-color: #ef4444">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-number">400</div>
            <div class="card-label">今日挂号人数</div>
          </div>
          <div class="card-trend">
            <el-icon><ArrowUp /></el-icon>
            <span>+8%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon" style="background-color: #10b981">
            <el-icon><Money /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-number">50000</div>
            <div class="card-label">今日门诊充值总额</div>
          </div>
          <div class="card-trend">
            <el-icon><ArrowUp /></el-icon>
            <span>+15%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon" style="background-color: #f59e0b">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-number">40000</div>
            <div class="card-label">今日门诊消费总额</div>
          </div>
          <div class="card-trend">
            <el-icon><ArrowUp /></el-icon>
            <span>+6%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon" style="background-color: #8b5cf6">
            <el-icon><User /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-number">678</div>
            <div class="card-label">今日绑卡人数</div>
          </div>
          <div class="card-trend">
            <el-icon><ArrowUp /></el-icon>
            <span>+20%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <h3>近7日挂号预约情况</h3>
        <div class="chart-wrapper">
          <div class="chart-placeholder">
            <div class="chart-bars">
              <div class="bar" style="height: 70%;" data-value="5600"></div>
              <div class="bar" style="height: 95%;" data-value="7600"></div>
              <div class="bar" style="height: 45%;" data-value="3600"></div>
              <div class="bar" style="height: 62.5%;" data-value="5000"></div>
              <div class="bar" style="height: 97.5%;" data-value="7800"></div>
              <div class="bar" style="height: 70%;" data-value="5600"></div>
              <div class="bar" style="height: 77.5%;" data-value="6200"></div>
            </div>
            <div class="chart-labels">
              <span>1月1日</span>
              <span>1月2日</span>
              <span>1月3日</span>
              <span>1月4日</span>
              <span>1月5日</span>
              <span>1月6日</span>
              <span>1月7日</span>
            </div>
          </div>
          <div class="chart-y-axis">
            <span>8000</span>
            <span>6000</span>
            <span>4000</span>
            <span>2000</span>
            <span>0</span>
          </div>
        </div>
        <div class="chart-title">预约人次</div>
      </div>

      <div class="chart-container">
        <h3>近7日门诊充值趋势</h3>
        <div class="chart-wrapper">
          <div class="chart-placeholder line-chart">
            <svg viewBox="0 0 400 200" class="line-chart-svg">
              <defs>
                <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.3" />
                  <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
                </linearGradient>
              </defs>
              <!-- 面积填充 -->
              <path d="M 0,180 L 57,175 L 114,50 L 171,175 L 228,20 L 285,120 L 342,175 L 400,175 Z" 
                    fill="url(#areaGradient)" />
              <!-- 折线 -->
              <path d="M 0,180 L 57,175 L 114,50 L 171,175 L 228,20 L 285,120 L 342,175" 
                    stroke="#3b82f6" stroke-width="2" fill="none" />
              <!-- 数据点 -->
              <circle cx="0" cy="180" r="3" fill="#3b82f6" />
              <circle cx="57" cy="175" r="3" fill="#3b82f6" />
              <circle cx="114" cy="50" r="3" fill="#3b82f6" />
              <circle cx="171" cy="175" r="3" fill="#3b82f6" />
              <circle cx="228" cy="20" r="3" fill="#3b82f6" />
              <circle cx="285" cy="120" r="3" fill="#3b82f6" />
              <circle cx="342" cy="175" r="3" fill="#3b82f6" />
            </svg>
            <div class="chart-labels">
              <span>1月1日</span>
              <span>1月2日</span>
              <span>1月3日</span>
              <span>1月4日</span>
              <span>1月5日</span>
              <span>1月6日</span>
              <span>1月7日</span>
            </div>
          </div>
          <div class="chart-y-axis">
            <span>80000</span>
            <span>60000</span>
            <span>40000</span>
            <span>20000</span>
            <span>0</span>
          </div>
        </div>
        <div class="chart-title">单位(元)</div>
      </div>
    </div>

    <div class="bottom-section">
      <div class="realtime-registration">
        <h3>实时挂号</h3>
        <el-table :data="realtimeRegistrations" style="width: 100%">
          <el-table-column prop="avatar" label="头像" width="80">
            <template #default>
              <el-avatar :size="40" style="background-color: #3b82f6">
                <el-icon><Avatar /></el-icon>
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="患者姓名" width="120" />
          <el-table-column prop="phone" label="患者手机号码" width="150" />
          <el-table-column prop="department" label="挂号科室" width="150" />
          <el-table-column prop="fee" label="挂号费" width="100" />
          <el-table-column prop="time" label="挂号时间" />
        </el-table>
      </div>

      <div class="popular-section">
        <div class="popular-departments">
          <h3>热门科室</h3>
          <div class="ranking-list">
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #ef4444">1</div>
              <div class="item-content">
                <div class="item-name">肾内科</div>
                <div class="item-count">120</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #10b981">2</div>
              <div class="item-content">
                <div class="item-name">眼科</div>
                <div class="item-count">100</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #f59e0b">3</div>
              <div class="item-content">
                <div class="item-name">心血管内科</div>
                <div class="item-count">90</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #6b7280">4</div>
              <div class="item-content">
                <div class="item-name">发热门诊</div>
                <div class="item-count">80</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #6b7280">5</div>
              <div class="item-content">
                <div class="item-name">心血管内科</div>
                <div class="item-count">70</div>
              </div>
            </div>
          </div>
        </div>

        <div class="popular-doctors">
          <h3>热门医生</h3>
          <div class="ranking-list">
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #ef4444">1</div>
              <div class="item-content">
                <div class="item-name">王明宇</div>
                <div class="item-count">120</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #10b981">2</div>
              <div class="item-content">
                <div class="item-name">连然</div>
                <div class="item-count">100</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #f59e0b">3</div>
              <div class="item-content">
                <div class="item-name">傅新</div>
                <div class="item-count">90</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #6b7280">4</div>
              <div class="item-content">
                <div class="item-name">李卓然</div>
                <div class="item-count">80</div>
              </div>
            </div>
            <div class="ranking-item">
              <div class="rank-circle" style="background-color: #6b7280">5</div>
              <div class="item-content">
                <div class="item-name">吴鸣</div>
                <div class="item-count">70</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  Plus, 
  User,
  ArrowUp,
  Avatar,
  Money,
  DataAnalysis,
  Monitor
} from '@element-plus/icons-vue'

// 实时挂号数据
const realtimeRegistrations = ref([
  {
    name: '赵马',
    phone: '15678900988',
    department: '内科-肾内科',
    fee: '60.00',
    time: '2019-08-15 14:02:26'
  },
  {
    name: '赵马',
    phone: '15678900988',
    department: '内科-肾内科',
    fee: '60.00',
    time: '2019-08-15 14:02:26'
  },
  {
    name: '赵马',
    phone: '15678900988',
    department: '内科-肾内科',
    fee: '60.00',
    time: '2019-08-15 14:02:26'
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 120px);
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #1e3a8a;
  margin: 0;
}

.data-overview {
  margin-bottom: 32px;
}

.data-overview h2 {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: transform 0.2s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.card-content {
  flex: 1;
}

.card-number {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 4px;
}

.card-label {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.2;
}

.card-trend {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #10b981;
  font-weight: 500;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.chart-wrapper {
  display: flex;
  gap: 16px;
  height: 200px;
}

.chart-placeholder {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 160px;
  gap: 8px;
}

.bar {
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  border-radius: 4px 4px 0 0;
  min-width: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.bar:hover {
  background: linear-gradient(to top, #2563eb, #3b82f6);
  transform: scaleY(1.05);
}

.bar::after {
  content: attr(data-value);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
  min-width: 40px;
}

.chart-title {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

.line-chart {
  position: relative;
}

.line-chart-svg {
  width: 100%;
  height: 160px;
}

.line-chart .chart-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

.bottom-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.realtime-registration {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.realtime-registration h3 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.popular-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.popular-departments,
.popular-doctors {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.popular-departments h3,
.popular-doctors h3 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.item-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.item-count {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .bottom-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 150px;
  }
  
  .chart-bars {
    height: 120px;
  }
  
  .chart-y-axis {
    height: 120px;
  }
  
  .line-chart-svg {
    height: 120px;
  }
  
  .dashboard-container {
    padding: 16px;
  }
}
</style>